<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <title>学生位置</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
        }

        .amap-icon img{
            width: 25px;
            height: 34px;
        }
    </style>
</head>
<body>
<div id="container"></div>

<div class="input-card">
    <h4>地图自适应</h4>
    <input id="setFitView" type="button" class="btn" value="地图自适应显示" />
</div>
<div class="info">
    <div id="centerCoord"></div>
    <div id="tips"></div>
</div>
<script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=cf5617fb9e043ca3221c1187abdeaf83"></script>
<script type="text/javascript">
    var map = new AMap.Map('container', {
        resizeEnable: true,
        center: [120.438667,30.448639],
        // zoomToAccuracy: true, 
        zoom: 13
    });

    map.clearMap();  // 清除地图覆盖物

    // var markers = [{
    //     icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
    //     position: [120.438667,30.448639]
    // }, {
    //     icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
    //     position: [120.438667,30.449639]
    // }, {
    //     icon: '//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
    //     position: [120.439667,30.448639]
    // }];






    let i=0;
let studentt=['坤坤','jioker','jojo','卡沙','唐山'];
    function addMarker(lng,lat) {
        marker = new AMap.Marker({
            icon: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
            position: [lng,lat],
            offset: new AMap.Pixel(-13, -30)
        });
        marker.setMap(map);
        console.log(i);
        // marker.setTitle('学生'+i.valueOf());
        marker.setTitle(studentt[i]);
        i=i+1;

    }



    var center = map.getCenter();

    var centerText = '当前中心点坐标：' + center.getLng() + ',' + center.getLat();
    document.getElementById('centerCoord').innerHTML = centerText;

    function locall(){
            xhttp.onreadystatechange = function () {
               if (this.readyState === 4 && this.status === 200) {
                   const obj = JSON.parse(this.responseText);
                   if (obj.success){
                      for(let loca of obj.data){
                          addMarker(loca.lng,loca.lat);
                       }
                        }}};
           xhttp.open("GET", "/t", true);
           xhttp.setRequestHeader('Accept', 'application/json');
           xhttp.send();
    }

    var xhttp=new XMLHttpRequest();

    // 添加事件监听, 使地图自适应显示到合适的范围
    AMap.event.addDomListener(document.getElementById('setFitView'), 'click', function() {
        var newCenter = map.setFitView();
        document.getElementById('centerCoord').innerHTML = '当前中心点坐标：' + newCenter.getCenter();
        // document.getElementById('tips').innerHTML = '通过setFitView，地图自适应显示到合适的范围内,点标记已全部显示在视野中！';
    });

    window.onload=function () {
        locall();
    }
</script>
</body>
</html>